<template>
	<view class="content">
		<view class="content_title">
			我发起的{{mycreatedtxl.length}}个通讯录
		</view>
		<view class="content_box">
			<view class="content_box_list" v-for="(v,k) in mycreatedtxl" :key="k" @click="link('/comm/txlindex/txlindex?id='+v.txlid)">
				<view class="title">
					<view class="name">{{v.txlname}}</view>
					<view class="time">{{v.createrq}}</view>
				</view>
				<view class="bottom">
					<view class="text">浏览数 {{v.viewcount}}</view>
					<view class="text">成员数 {{v.inherecount}}</view>
				</view>
			</view>
		</view>
		<view class="content_title">
			我加入的{{myjointxl.length}}个通讯录
		</view>
		<view class="content_box">
			<view class="content_box_list" v-for="(v,k) in myjointxl" :key="k" @click="link('/comm/txlindex/txlindex?id='+v.txlid)">
				<view class="title">
					<view class="name">{{v.txlname}}</view>
					<view class="time">{{v.createrq}}</view>
				</view>
				<view class="bottom">
					<view class="text">浏览数 {{v.viewcount}}</view>
					<view class="text">成员数 {{v.inherecount}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		homeApi
	} from "@/api/index"
	import {link} from '@/utils/utils.js'
	onShow(()=>{
		if (uni.getStorageSync("token")) {
			getTxl()
		}
	})
	const mycreatedtxl = ref([])
	const myjointxl = ref([])
	const getTxl = async()=>{
		let data = {
			do:'mytxllist',
		}
		let res = await homeApi.publicGet(data)
		for (let i = 0; i < res.columns.length; i++) {
			if (res.columns[i].name == 'mycreatedtxl') {
				mycreatedtxl.value = res.columns[i].items?res.columns[i].items:[]
			}
			if (res.columns[i].name == 'myjointxl') {
				myjointxl.value = res.columns[i].items?res.columns[i].items:[]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		overflow-y: auto;

		&_title {
			width: calc(100% - 60rpx);
			padding: 30rpx;
			font-size: 32rpx;
			background: #f5f6fa;
		}

		&_box {
			width: calc(100% - 60rpx);
			padding: 0 30rpx;

			&_list {
				width: 100%;
				padding: 30rpx 0;
				border-bottom: 1px solid #ebecf4;

				.title {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.name {
						font-size: 32rpx;
						font-weight: bold;
						width: calc(100% - 200rpx);
					}

					.time {
						width: 200rpx;
						font-size: 28rpx;
						text-align: right;
						color: #bbb;
					}
				}

				.bottom {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-top: 40rpx;
					font-size: 26rpx;
					color: #666;

					.text {
						margin-left: 30rpx;
					}
				}
			}

			&_list:nth-last-child(1) {
				border: none;
			}
		}
	}
</style>